<template>
    <view class="page">
        <view class="main">
            <view class="goods-main" v-for="(item,index) in mealData" :key="index">
                <view class="nav">
                    <view class="icon"></view>
                    <view class="title">{{item.title}} (可选1份)</view>
                </view>
                <view class="goods-wrap">
                    <view class="goods-list" v-for="(item2,index2) in item.goods" :key="item2.gid" @click="selectGoods(index,index2)">
                        <view class="image">
                            <image :src="item2.image" alt=""></image>
                        </view>
                        <view class="text">{{item2.title}}</view>
                        <view class="price" v-if="item2.offset_price!=0">
                            {{item2.offset_price>0?"+"+item2.offset_price:item2.offset_price}} 元
                        </view>
                        <view :class="{elc:true, active:item2.active}"></view>
                    </view>
                </view>
            </view>
        </view>
        <view style="width:100%;height:120rpx;"></view>
        <view class="cart-main">
            <view class="total">小计：￥{{total}}</view>
            <view class="line"></view>
            <view class="cart" @click="addCart">
                <view class="cart-icon"></view>
                <view class="text">加入购物车 ></view>
            </view>
        </view>
    </view>
</template>

<script>
    import {mapActions,mapState} from "vuex";
    export default {
        name: "meal",
        onLoad(opts){
            //分店的id
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            //菜品的id
            this.gid=opts.gid?opts.gid:"";
            //桌号
            this.table_code=opts.table_code?opts.table_code:"";
            this.mealItems=[];//套餐里菜品明细
            this.simpleMealItems=[];//套餐菜品明细的gid
            this.isSubmit=true;//防止网速慢重复提交
            //获取套餐数据
            this.getMeal({branch_shop_id:this.branch_shop_id,gid:this.gid,success:()=>{
                this.setMealItems();
            }});
            //获取套餐详情
            this.getMealDetails({branch_shop_id:this.branch_shop_id,gid:this.gid,success:()=>{
                 uni.setNavigationBarTitle({ title:this.title })
            }});
           
        },
        methods:{
            ...mapActions({
                getMeal:"meal/getMeal",
                getMealDetails:"meal/getMealDetails",
                asyncAddCart:"cart/addCart"
            }),
            //选择菜品
            selectGoods(index,index2){
                for(let i=0;i<this.mealData[index].goods.length;i++){
                    if(this.mealData[index].goods[i].active){
                        this.mealData[index].goods[i].active=false;
                        break;
                    }
                }
                this.mealData[index].goods[index2].active=true;
                this.$set(this.mealData[index].goods,index2,this.mealData[index].goods[index2]);
                this.setMealItems();
            },
            //添加购物车
            addCart(){
                this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                    if(this.isSubmit){
                        this.isSubmit=false;
                        //添加购物车数据到vuex
                        let cartData={
                            "title":this.title,//菜品和套餐的名称
                            "branch_shop_id":this.branch_shop_id,//分店的id
                            "table_code":this.table_code,//桌号
                            "gid":this.gid,//套餐的唯一标识
                            "price":this.total,//价格
                            "amount":1,//菜品的数量
                            "is_meal":1,//是否套餐
                            "meal_type":1,//套餐的类型。0：普通套餐，1：自定义套餐
                            "meal_items":this.mealItems,//套餐里菜品的明细
                            "new_meal_items":this.simpleMealItems,//套餐里菜品明细的gid
                            "isAmountInput":false,//是否显示数量input输入框
                            "isAmountInputFocus":false,//是否获取input焦点
                        };
                        this.asyncAddCart({cartData,success:()=>{
                            uni.showToast({
                                title:"加入购物车成功！",
                                icon:"success",
                                duration:2000
                            });
                            setTimeout(()=>{
                                this.isSubmit=true;
                                uni.hideToast();
                                uni.navigateBack({ delta: 1 })
                            },2000)
                        }})
                    }
                })
            },
            //组装套餐菜品明细
            setMealItems(){
                let mealItems=[];
                if(this.mealData.length){
                    for(let i=0;i<this.mealData.length;i++){
                        for(let j=0;j<this.mealData[i].goods.length;j++){
                            //如果选择了菜品
                            if(this.mealData[i].goods[j].active){
                                mealItems.push({gid:this.mealData[i].goods[j].gid,title:this.mealData[i].goods[j].title,price:this.mealData[i].goods[j].price,amount:1,pack_price:this.mealData[i].goods[j].pack_price,dis_amount:1});
                            }
                        }
                    }
                    //计算数量
                    if(mealItems.length>0){
                        let newMealItems=[];//套餐里菜品明细的数据
                        let simpleMealItems=[];//套餐菜品明细的gid
                        let miObj={};
                        for(let i=0;i<mealItems.length;i++){
                            if(!miObj[mealItems[i].gid]){//没有重复的菜品
                                miObj[mealItems[i].gid]=true;
                                newMealItems.push({gid:mealItems[i].gid,title:mealItems[i].title,price:mealItems[i].price,amount:mealItems[i].amount,pack_price:mealItems[i].pack_price,dis_amount:mealItems[i].dis_amount});
                                simpleMealItems.push({gid:mealItems[i].gid});
                            }else{//有重复的菜品
                                if(newMealItems.length>0){
                                    for(let j=0;j<newMealItems.length;j++){
                                        //如果有相同的菜品
                                        if(mealItems[i].gid==newMealItems[j].gid){
                                            newMealItems[j].amount=++newMealItems[j].amount;
                                            newMealItems[j].dis_amount=newMealItems[j].amount;
                                        }
                                    }
                                }
                            }
                        }

                        this.mealItems=newMealItems;
                        this.simpleMealItems=simpleMealItems;
                    }
                }
            }
        },
        computed:{
            ...mapState({
                mealData:state=>state.meal.mealData,
                title:state=>state.meal.title
            }),
            total(){
                let total=0;
                for(let i=0;i<this.mealData.length;i++){
                    for(let j=0;j<this.mealData[i].goods.length;j++){
                        if(this.mealData[i].goods[j].active){
                            total+=parseFloat(this.mealData[i].goods[j].meal_price);
                        }
                    }
                }
                total=parseFloat(total.toFixed(2));
                return total;
            }
        }
    }
</script>

<style scoped>
    .page{width:100%;min-height:100%;margin:0 auto;background-color:#EFEFEF;}
    .page .main{width:95%;height:auto;background-color:#FFFFFF;margin:0 auto;margin-top:30rpx;border-radius: 6px;box-shadow: 3px 3px 5px #e7e7e7;overflow:hidden;}
    .page .goods-main{width:90%;margin:0 auto;margin-top:20rpx;margin-bottom:20rpx;}
    .page .main .nav{width:100%;height:70rpx;display: flex;align-items: center;box-sizing: border-box;border-bottom:1px solid #EFEFEF;margin:0 auto;}
    .page .main .nav .icon{width:20rpx;height:45rpx;background-color:#f6ab00;border-radius: 20px;margin-right:20rpx;}
    .page .main .nav .title{font-size:28rpx;color:#333333;font-weight: bold;}
    .page .main .goods-wrap{width:100%;display:flex;flex-wrap:wrap;}
    .page .main .goods-list{width:200rpx;height:317rpx;box-shadow: 0px 3px 5px #e7e7e7;border-radius: 6px;margin-top:30rpx;margin-left:1%;margin-right:1%;position: relative;}
    .page .main .goods-list .image{width:160rpx;height:160rpx;margin:0 auto;margin-top:20rpx;}
    .page .main .goods-list .image image{width:100%;height:100%;border-radius: 6px;}
    .page .main .goods-list .text{width:160rpx;font-size:24rpx;text-align: center;white-space: nowrap;color:#333333;overflow:hidden;text-overflow: ellipsis;margin:0 auto;margin-top:20rpx;}
    .page .main .goods-list .price{text-align:center;font-size:24rpx;color:#ff0000;margin-top:5rpx;}
    .page .main .goods-list .elc{width:50rpx;height:50rpx;border-radius: 100%;border:2px solid #EFEFEF;position: absolute;right:0px;top:0px;background-color:#FFFFFF;}
    .page .main .goods-list .elc.active{background-image:url("~@/static/images/goods/right.png");background-size:100%;background-repeat: no-repeat;background-position: center;}

    .cart-main{width:100%;height:100rpx;background-color:#f6ab00;position: fixed;z-index:90;left:0px;bottom:0px;display:flex;align-items: center;padding:0px 20rpx;box-sizing: border-box;}
    .cart-main .total{font-size:28rpx;color:#FFFFFF;width:408rpx;}
    .cart-main .line{width:2px;height:60rpx;background-color:rgba(255,255,255,0.4);margin-right:37rpx;}
    .cart-main .cart{width:auto;height:auto;display:flex;align-items: center;}
    .cart-main .cart .cart-icon{width:60rpx;height:60rpx;background-image:url("~@/static/images/goods/cart2.png");background-size:100%;background-position:center;background-repeat: no-repeat;margin-right:25rpx;}
    .cart-main .cart .text{font-size:28rpx;color:#FFFFFF;}
</style>
